<template>
    <div class="theme-switcher-container">
        <button @click="toggleTheme" class="theme-switcher">
            {{ themeIcon }}
        </button>
        <language-switcher/>
    </div>
</template>

<script setup>
import {useThemesStore} from "@store";
import LanguageSwitcher from "@components/LanguageSwitcher.vue";

const themesStore = useThemesStore();

const themeIcon = computed(() => themesStore.getThemes === 'dark' ? '☪' : '☼');

const toggleTheme = () => {
    const themes = themesStore.getThemes === 'dark' ? 'light' : 'dark';
    themesStore.setThemes(themesStore.getThemes === 'dark' ? 'light' : 'dark');
    document.documentElement.setAttribute('data-theme', themes);
}
</script>

<style lang="scss" scoped>
.theme-switcher-container {
    position: fixed;
    bottom: 10%;
    right: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 10px;
    box-shadow: 0 0 1px var(--md-sys-color-on-surface);
    z-index: 999;
    transition: all 0.3s ease-in-out;
    color: var(--md-sys-color-on-background);
    backdrop-filter: blur(10px);

    .theme-switcher {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.2rem;
        color: inherit;
    }
}
</style>
